<template>
  <div class="parent">
    <div>父子组件通信示例</div>
    <div>父级</div>
    <button @click="cFun()">父级调用子组件方法2131231</button>
    <component-communication2 ref="childRef" @change="change"></component-communication2>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ComponentCommunication2 from './component-communication2.vue';
const childRef = ref<typeof ComponentCommunication2>()

const change = (msg: string) => {
  console.log('父级函数:' + msg);
}

const cFun = () => {
  console.log('子组件暴露的属性', childRef.value);
  childRef.value?.cFun('父级调用') // 调用子组件方法
}
</script>
<style lang="scss" scoped>
.parent {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid red;
}
</style>
